<template>
  <div>
    <headers v-if="$slots.header">
      <slot name="header" :msg :title="tle"> header</slot>
    </headers>
    <main>
      <slot :msg> main</slot>
    </main>
    <footer>
      <slot name="footer"> footer </slot>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const msg = ref('子组件的msg')
const tle = ref('子组件的标题')
</script>
